import React from 'react';
import moment from 'moment';
import api from 'js/api/index';
import { List, Picker, Icon } from 'antd-mobile';
import InfiniteScroll from 'react-infinite-scroller';
import { SelectDate, SelectDateComponent } from 'views/component/selectDate/selectDate';
import SelectTitle from 'views/component/selectTitle/selectTitle';
import { SubViewLink } from 'views/component/subViewLink/subViewLink';
import TableBox from 'views/component/table/table';
import { i18n } from 'js/core/i18n';
import './handleListSummary.scss';

let pagesize = 10;
let planTypeList = [{
    label: i18n.get('全部状态'),
    value: -1
}, {
    label: i18n.get('未执行'),
    value: 0
}, {
    label: i18n.get('执行中'),
    value: 1
}, {
    label: i18n.get('已过期'),
    value: 2
}]

let typeList = [{
    label: i18n.get('全部状态'),
    value: -1
}, {
    label: i18n.get('未评分'),
    value: 0
}, {
    label: i18n.get('已评分'),
    value: 1
}]

class HandleListSummary extends React.Component {
    constructor() {
        super()
        this.query = {
            searchkey: '',
            start: moment().add(-100, 'days').format('YYYY-MM-DD'),
            end: moment().format('YYYY-MM-DD'),
            status: '',
            checkPlanStatus: '',
            DataTypeID: '',
            pagesize: pagesize,
            pageindex: 1,
        }
        this.state = {
            dataType: null,
            start: moment().add(-100, 'days').format('YYYY-MM-DD'),
            end: moment().format('YYYY-MM-DD'),
            data: [],
            typeText: i18n.get('评分状态'),
            typeId: -1,
            planTypeId: -1,
            planTypeText: i18n.get('计划状态'),
            hasMore: true,
        }
    }
    componentDidMount() {
        planTypeList = [{
            label: i18n.get('全部状态'),
            value: -1
        }, {
            label: i18n.get('未执行'),
            value: 0
        }, {
            label: i18n.get('执行中'),
            value: 1
        }, {
            label: i18n.get('已过期'),
            value: 2
        }];

        typeList = [{
            label: i18n.get('全部状态'),
            value: -1
        }, {
            label: i18n.get('未评分'),
            value: 0
        }, {
            label: i18n.get('已评分'),
            value: 1
        }];
    }
    dataTypeOnChange = (dataType) => {
        this.query.pageindex = 1;
        this.query.DataTypeID = dataType.DataTypeID;
        this.setState({ dataType: dataType, data: [], hasMore: true })
    }
    loadMore = () => {
        if (this.state.hasMore) {
            api('/Monitoring/AppCheckListPage', this.query).then((data) => {
                this.state.data = this.state.data.concat(data.data);
                this.query.pageindex += 1;
                if (data.data.length < pagesize) {
                    this.setState({ data: this.state.data, hasMore: false })
                } else {
                    this.setState({ data: this.state.data })
                }
            });
        }
    }
    dateSelect = () => {
        this.refs.selectDate.show()
    }
    complete = () => {
        this.query.pageindex = 1;
        this.setState({ data: [], hasMore: true })
    }
    dateOnChange = (value) => {
        this.query.start = value[0];
        this.query.end = value[1];
        this.query.pageindex = 1;
        this.setState({ start: value[0], end: value[1], data: [], hasMore: true })
    }
    onOk = (value) => {
        value = value[0];
        let typeText = typeList.find((item => item.value === value)).label;
        if (value === -1) {
            this.query.status = '';
            typeText = i18n.get('评分状态');
        } else {
            this.query.status = value;
        }
        this.query.pageindex = 1
        this.setState({ typeText: typeText, typeId: value, data: [], hasMore: true })
    }
    onPlanOk = (value) => {
        value = value[0];
        let typeText = planTypeList.find((item => item.value === value)).label;
        if (value === -1) {
            this.query.checkPlanStatus = '';
            typeText = i18n.get("计划状态");
        } else {
            this.query.checkPlanStatus = value;
        }
        this.query.pageindex = 1
        this.setState({ planTypeText: typeText, planTypeId: value, data: [], hasMore: true })
    }
    getShopName = (str) => {
        let strArray = str.split('-');
        return strArray[strArray.length - 1];
    }
    render() {
        let { hasMore, data, dataType, start, end, typeText, typeId, planTypeId, planTypeText } = this.state;
        let selectNode = <Picker extra={i18n.get("请选择")} okText={i18n.get("确定")} dismissText={i18n.get("取消")} value={[typeId]} cascade={false} data={[typeList]} cols={1} onOk={this.onOk}>
            <div className="flex-vcenter">{typeText}<Icon type="down" /></div>
        </Picker>

        let selectPlanNode = <Picker extra={i18n.get("请选择")} okText={i18n.get("确定")} dismissText={i18n.get("取消")} value={[planTypeId]} cascade={false} data={[planTypeList]} cols={1} onOk={this.onPlanOk}>
            <div className="flex-vcenter">{planTypeText}<Icon type="down" /></div>
        </Picker>
        return <div id="handleListSummary" className="flex-col">
            <div className="device-container">
                <List className="picker-list mb20">
                    <div className="deviceItem device-border flex-vcenter">
                        <SelectTitle classStyle="name">{i18n.get('实体名称')}</SelectTitle>
                        <SubViewLink moduleName="selectDataTypeId" className="flex-g-1 text-right deviceItemContent" title={i18n.get('选择实体')} modelData={{ onChange: this.dataTypeOnChange }}>
                            {dataType ? dataType.Name : <div style={{ color: '#909090' }}>{i18n.get('选择实体')}</div>}
                        </SubViewLink>
                    </div>
                    <SelectDateComponent className="deviceItem device-border flex-vcenter" value={[start, end]} onChange={(value) => { this.dateOnChange(value) }}>
                        <SelectTitle classStyle="add-group">{i18n.get('时段选择')}</SelectTitle>
                        <div className="flex-g-1 text-right deviceItemContent">
                            {start}-{end}
                        </div>
                    </SelectDateComponent>
                </List>
            </div>
            <div className="flex-g-1 scroll-absolute">
                <div>
                    <InfiniteScroll
                        pageStart={0}
                        useWindow={false}
                        loadMore={this.loadMore}
                        hasMore={hasMore}
                        threshold={50}
                    >
                        <TableBox heads={[i18n.get('店铺,计划名称'), selectPlanNode, selectNode, i18n.get('操作')]} >
                            {data.map((item, index) => (
                                <tr key={item.num}>
                                    <td>
                                        <p>{item.ShopName}</p>
                                        <p>{item.CheckPlanName}</p>
                                    </td>
                                    <td>
                                        <span className={"tag tagPlan-" + item.CheckPlanStatus}>{item.CheckPlanStatusDesc}</span>
                                    </td>
                                    <td>
                                        <span className={"tag tagStatus-" + item.CheckStatus}>{item.CheckStatusDesc}</span>
                                    </td>
                                    <td>
                                        {item.CheckStatus === 0 && <SubViewLink moduleName="monitoringMatch" title={i18n.get("评分")} modelData={{ id: item.ShopId }}>
                                            {i18n.get("评分")}
                                        </SubViewLink>}
                                        {item.CheckStatus === 1 && <SubViewLink moduleName="storeRecord" title={item.ShopName} modelData={{
                                            id: item.ShopId,
                                            start: moment().add(-100, 'days').format('YYYY-MM-DD'),
                                            end: moment().format('YYYY-MM-DD'),
                                        }}>
                                            {i18n.get("查看")}
                                        </SubViewLink>}
                                    </td>
                                </tr>
                            ))}
                        </TableBox>
                    </InfiniteScroll>
                </div>
            </div>
            <SubViewLink className="device-btn" moduleName="addHandleList" title={i18n.get("新增巡店计划")} modelData={{ complete: this.complete }}>
                <button type="button" className="btn btn-primary">{i18n.get("新增巡店计划")}</button>
            </SubViewLink>
        </div>
    }
}

export default HandleListSummary;